<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 20px;
        }

        .box {
            width: 800px;
            height: 60px;
            margin: 220px auto;
            position: relative;
        }

        #txt {
            width: 798px;
            height: 58px;
            border: 1px solid #ccc;
            font-size: 20px;
        }


        #keywords {
            position: absolute;
            top: 60px;
            left: 0;
            background-color: rgb(12, 255, 24);
            list-style: none;
            width: 798px;
            ;
        }

        li {
            line-height: 24px;
            cursor: pointer;
        }

        #description {
            /* display: none; */
            width: 798px;
            height: 200px;
            position: absolute;
            top: -210px;
            border: 1px dashed green;
        }

        .go {
            width: 100px;
            height: 40px;
            line-height: 40px;
            background-color: burlywood;
            box-shadow: cadetblue;
            position: absolute;
            text-align: center;
            left: 50px;
            top: 100px;
        }

        .go:hover {
            cursor: pointer;
            color: steelblue;
        }
    </style>
    <script src="js/get.js"></script>
</head> 

<body>
    <div class="go">
        单词存储
    </div>
    <div class="box">
        <div id="description"></div>
        <div class="top">
            <input type="text" id="txt" placeholder="请输入要检索的内容，可以是单词也可以是解释">
        </div>
        <ul id="keywords"></ul>
    </div>

    <script>
        // 需求：利用已有的在localStorage中存储的单词信息，来实现数据的查看（类似于百度搜索）

        /*
            思路分析1：先实现数据的查看和展示
            

            1. 用户输入事件：input#txt
            2. 获取用户输入的数据：安全处理
            3. 取出存储的数据：localStorage.getItem('words');
            4. 转对象：JSON.parse()
            5. 遍历对象
            5.1 匹配数据：indexOf()  属性名（单词）  属性值（解释）
            5.2 匹配成功：显示在li中（创建li，放入数据、追加到ul上）
        */

        // 获取相关元素
        let txt = get('#txt');
        let ul = get('#keywords');
        let des = get('#description');

        // 1. 用户输入事件：input#txt
        txt.oninput = function () {
            // 先清空原来的匹配数据
            ul.innerHTML = '';

            // 2. 获取用户输入的数据：安全处理
            let value = txt.value.trim();
            if (value.length == 0) { return; }
            // 3. 取出存储的数据：localStorage.getItem('words');
            let data = localStorage.getItem('words');
            // console.log(data);
            // 4. 转对象：JSON.parse()
            data = JSON.parse(data);
            // 5. 遍历对象
            for (let key in data) {
                // key是属性名，访问属性值？data[key]
                // 5.1 匹配数据：indexOf()  属性名（单词）  属性值（解释）
                if (key.indexOf(value) != -1 || data[key].indexOf(value) != -1) {
                    // 5.2 匹配成功：显示在li中（创建li，放入数据、追加到ul上）
                    let li = document.createElement('li');
                    li.innerText = `${key}：${data[key]}`;
                    ul.appendChild(li);

                    // 思路分析2：鼠标移入移出效果
                    li.onmouseover = function () {
                        li.style.backgroundColor = '#eeeeee';
                    };

                    li.onmouseout = function () {
                        li.style.backgroundColor = '';
                    };

                    // 思路分析3：鼠标点击效果
                    /* 
                        效果1：清空用户输入
                        效果2：将数据显示到 des中
                        效果3：清空ul
                     */
                    li.onclick = function () {
                        txt.value = '';
                        des.innerText = `${key}：${data[key]}`;
                        ul.innerHTML = '';
                    };
                }
            }
        };

    </script>
</body>

</html>